<template>
    <div class="me-box">
        <div class="userInfo" v-if="userInfo.id">
             <img src="../../images/touxiang.jpg" @click="toUserInfo">
             <span>{{ userInfo.name }}</span>
        </div>
        <div class="userInfo" v-else>
            <van-button plain type="success" @click="toLogin">登录/注册</van-button>
        </div>
        <div class="order-from">
            <div class="order-top">
                <span>我的订单</span>
            </div>
            <div class="order-bottom">
                <div v-for="item in iconList" :key="item.key" @click="toPay(item)">
                    <van-icon :name="item.icon" />
                    <span>{{ item.title }}</span>
                </div>
            </div>
        </div>
        <div class="other">
            <div class="other-top">
                <span>更多功能</span>
            </div>
            <div class="other-bottom">
                <div 
                    v-for="item in moreList"
                    :key="item.key"
                    @click="toSetUp(item)"
                 >
                    <van-icon :name="item.icon" />
                    <span>{{ item.title }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, reactive,onMounted } from 'vue'
import { useRouter } from 'vue-router' 
import { useStore } from 'vuex' 
import { showFailToast } from 'vant'

let store = useStore()
let router = useRouter()

let iconList = reactive([
    {id:1,icon:'card',title:'待付款'},
    {id:2,icon:'cart-circle',title:'待发货'},
    {id:3,icon:'completed',title:'待收货'},
    {id:4,icon:'chat-o',title:'待评价'},
    {id:5,icon:'refund-o',title:'退款/售后'},
])

let moreList = reactive([
    {id:1,icon:'gold-coin',title:'我的钱包'},
    {id:2,icon:'star',title:'我的收藏'},
    {id:3,icon:'location',title:'地址管理'},
    {id:4,icon:'setting',title:'设置'},
    {id:5,icon:'clock',title:'浏览记录'},
    {id:6,icon:'service',title:'联系客服'}
])

//获取用户信息
let userInfo = computed(() => {
  return store.getters['loginModule/getUserInfo']
})


//跳转设置页面
function toSetUp(val){
    // console.log(val)
    if(moreList[3].id === val.id ){
            // console.log('-----------');
            router.push('/setup')
            return
        }
    if(!!userInfo.value.id){
        if(moreList[2].id === val.id){
            router.push('/manageAddr')
        }
        if(moreList[0].id === val.id){
            router.push('/money')
        }
    }else{
        showFailToast('您还没有登录')
    }
    
}

//跳转待支付一系列页面
function toPay(val){
    if(iconList[0].id === val.id){
        router.push('/pay')
        return
    }
    if(iconList[1].id === val.id){
        router.push('/putaway')
        return
    }
}

//跳转个人资料页面
function toUserInfo(){
        router.push('/userInfo')
}

//去登录
function toLogin(){
    router.push('/login')
}
// onMounted(()=>{
//     console.log(userInfo.value);
// })
</script>

<style lang="less" scoped>
@import '../../style/common.less';
    .me-box{
        display: block;
        position: relative;
        height: calc(100vh - 50px);
        width: 100vw;
        padding-top: 9vh;
        overflow-x: hidden;
        
        &::after{
            content: "";
            background: url(../../images/meBg.webp) repeat-y;
            transform: rotate(180deg);
            opacity: 0.4;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }
        >.userInfo{
            height: 130px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            >img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
                border: 2px solid @c9;
            }
                >span{
                    display: block;
                    font-weight: 600;
                    font-size: 1.2rem;
                    color: @c10;
                    >.van-icon{
                        font-size: 1.4rem;
                        color: #71c364;
                    }
            }
            >.van-button{
                margin-top: 50px;
                width: 132px;
                height: 50px;
                font-size: 1rem;
            }
        }
        >.order-from{
            width: 340px;
            background: #fff;
            margin: 0  auto;
            border-radius: 8px;
            padding: 4px;
            margin-bottom: 20px;
            >.order-top{
                padding: 8px;
                border-bottom: 1px solid @g4;
                height: 50px;
                line-height: 40px;
                >span{
                    font-size: .8rem;
                    margin-left: 16px;
                }
            }
            >.order-bottom{
                display: flex;
                justify-content: space-around;
                min-height: 80px;
                >div{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    >.van-icon{
                        font-size: 1.4rem;
                        color: #71c364;
                        display: block;
                        margin-bottom: 4px;
                    }
                    >span{
                    font-size: .7rem;
                    color: @g8;
                    }
                }
            }
           
        }
        >.other{
            width: 340px;
            background: #fff;
            margin: 0  auto;
            border-radius: 8px;
            padding: 10px 4px;
            >.other-top{
                padding: 8px;
                border-bottom: 1px solid @g4;
                height: 50px;
                line-height: 40px;
                >span{
                    font-size: .8rem;
                    margin-left: 16px;
                }
            }
            >.other-bottom{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                min-height: 180px;
                >div{
                    display: flex;
                    width: 33%;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    >.van-icon{
                        font-size: 1.4rem;
                        color: #eea53c;
                        display: block;
                        margin-bottom: 10px;
                    }
                    >span{
                    font-size: .7rem;
                    color: @g8;
                }
                }
            }
        }
        
    }
</style>